<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开往2035的UI设计专列</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0f1b33, #1a365d);
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            text-align: center;
            padding: 40px 0;
            position: relative;
        }
        
        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(to right, #4facfe, #00f2fe);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 20px rgba(79, 172, 254, 0.3);
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #a0aec0;
            margin-bottom: 40px;
        }
        
        .modules {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .module {
            flex: 1;
            min-width: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .module:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            background: rgba(255, 255, 255, 0.15);
        }
        
        .module-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }
        
        .module h2 {
            font-size: 1.8rem;
            margin-bottom: 15px;
        }
        
        .module p {
            color: #cbd5e0;
            line-height: 1.6;
        }
        
        /* 灵光一现页面样式 */
        #inspiration-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 27, 51, 0.95);
            z-index: 100;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .spark-button {
            padding: 20px 40px;
            font-size: 1.5rem;
            background: linear-gradient(to right, #ff6b6b, #ffa500);
            border: none;
            border-radius: 50px;
            color: white;
            cursor: pointer;
            margin-bottom: 40px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
        }
        
        .spark-button:hover {
            transform: scale(1.05);
            box-shadow: 0 15px 25px rgba(255, 107, 107, 0.4);
        }
        
        .knowledge-graph {
            width: 90%;
            height: 70vh;
            position: relative;
        }
        
        .node {
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.5s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .node:hover {
            transform: scale(1.1);
            z-index: 10;
        }
        
        .central-node {
            background: linear-gradient(135deg, #ff6b6b, #ffa500);
            width: 150px;
            height: 150px;
            font-size: 1.2rem;
        }
        
        .category-node {
            background: linear-gradient(135deg, #4facfe, #00f2fe);
            font-size: 1rem;
        }
        
        .subcategory-node {
            background: linear-gradient(135deg, #a8e6cf, #56ab2f);
            width: 100px;
            height: 100px;
            font-size: 0.9rem;
        }
        
        .centered {
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
            z-index: 20;
        }
        
        .hidden {
            display: none !important;
        }
        
        .details-panel {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 600px;
            background: rgba(30, 41, 59, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
            z-index: 200;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        .detail-item {
            margin-bottom: 15px;
        }
        
        .detail-item h4 {
            color: #4facfe;
            margin-bottom: 5px;
        }
        
        /* 游戏页面样式 */
        #game-page {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            z-index: 100;
            overflow-y: auto;
        }
        
        .game-container {
            width: 100%;
            min-height: 100vh;
            padding: 15px;
        }
        
        .back-button {
            position: absolute;
            top: 20px;
            left: 20px;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 101;
        }
        
        .back-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .graph-controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }
        
        .control-button {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .control-button:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        /* 新列车游戏样式 */
        :root {
            --primary: #4361ee;
            --secondary: #3a0ca3;
            --accent: #f72585;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #4cc9f0;
            --warning: #f8961e;
            --danger: #e63946;
        }
        
        .card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--success);
        }
        
        .card-subtitle {
            font-size: 1rem;
            opacity: 0.8;
            margin-bottom: 15px;
        }
        
        /* 站台样式 */
        .platform-info {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 20px;
        }
        
        .info-card {
            background: rgba(255, 255, 255, 0.15);
            padding: 15px;
            border-radius: 12px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        .info-card:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }
        
        .info-card i {
            font-size: 1.8rem;
            margin-bottom: 10px;
            color: var(--success);
        }
        
        .info-card h3 {
            font-size: 1rem;
            margin-bottom: 8px;
        }
        
        .train-animation {
            height: 100px;
            position: relative;
            margin: 25px 0;
            overflow: hidden;
            border-radius: 12px;
            background: rgba(0, 0, 0, 0.2);
        }
        
        .train {
            position: absolute;
            width: 180px;
            height: 70px;
            background: linear-gradient(90deg, #2c3e50, #3498db);
            top: 15px;
            left: -190px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: left 0.1s linear;
        }
        
        .train::before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background: var(--accent);
            border-radius: 50%;
            right: 12px;
        }
        
        .train-windows {
            display: flex;
            gap: 10px;
        }
        
        .train-window {
            width: 22px;
            height: 22px;
            background: var(--success);
            border-radius: 50%;
            border: 2px solid #2c3e50;
        }
        
        .action-buttons {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 20px;
        }
        
        .btn {
            padding: 14px 20px;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }
        
        .primary-btn {
            background: linear-gradient(90deg, var(--accent), var(--warning));
            color: white;
        }
        
        .secondary-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.5);
        }
        
        .btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        /* 车票样式 */
        .ticket-card {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 15px;
            padding: 20px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
            max-width: 100%;
            margin: 0 auto;
        }
        
        .ticket-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--accent), var(--warning), var(--success), var(--primary));
        }
        
        .ticket-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px dashed rgba(255, 255, 255, 0.3);
        }
        
        .ticket-body {
            margin-bottom: 25px;
        }
        
        .info-row {
            display: flex;
            flex-direction: column;
            margin-bottom: 15px;
            gap: 10px;
        }
        
        .info-item {
            width: 100%;
        }
        
        .challenge-title {
            font-size: 1.4rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--warning);
        }
        
        .tech-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        
        .tag {
            background: rgba(255, 255, 255, 0.2);
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 0.85rem;
            font-weight: bold;
        }
        
        /* 任务页面样式 */
        .mission-stages {
            display: flex;
            flex-direction: column;
            margin-bottom: 25px;
            gap: 15px;
            position: relative;
        }
        
        .stage {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
        }
        
        .stage-circle {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            border: 3px solid transparent;
            flex-shrink: 0;
        }
        
        .stage.active .stage-circle {
            background: var(--primary);
            box-shadow: 0 0 0 5px rgba(67, 97, 238, 0.3);
            border-color: var(--light);
        }
        
        .stage.completed .stage-circle {
            background: var(--success);
        }
        
        .stage-content {
            flex: 1;
        }
        
        .stage-name {
            font-weight: bold;
            margin-bottom: 3px;
            font-size: 1.1rem;
        }
        
        .stage-desc {
            font-size: 0.85rem;
            opacity: 0.8;
        }
        
        .mission-content {
            background: rgba(0, 0, 0, 0.2);
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .task-section {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .task-section:last-child {
            border-bottom: none;
        }
        
        .task-title {
            font-size: 1.3rem;
            margin-bottom: 12px;
            color: var(--success);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .task-desc {
            margin-bottom: 15px;
            line-height: 1.5;
        }
        
        .task-requirements {
            background: rgba(255, 255, 255, 0.05);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
        }
        
        .task-requirements h4 {
            margin-bottom: 12px;
            color: var(--warning);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .requirements-list {
            list-style-type: none;
        }
        
        .requirements-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
        }
        
        .requirements-list li:last-child {
            border-bottom: none;
        }
        
        .requirements-list li i {
            color: var(--success);
            font-size: 0.9rem;
        }
        
        .submission-area {
            margin-top: 20px;
        }
        
        .submission-area h4 {
            margin-bottom: 12px;
            color: var(--warning);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .submission-text {
            width: 100%;
            min-height: 150px;
            padding: 15px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 1rem;
            resize: vertical;
            margin-bottom: 15px;
        }
        
        .submission-text:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .file-upload {
            margin-bottom: 15px;
        }
        
        .file-upload-label {
            display: inline-block;
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px dashed rgba(255, 255, 255, 0.3);
            text-align: center;
            width: 100%;
            font-size: 0.9rem;
        }
        
        .file-upload-label:active {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--primary);
        }
        
        .file-upload input {
            display: none;
        }
        
        .mission-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        /* AI助手样式 */
        .ai-assistant {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            z-index: 100;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .ai-assistant:active {
            transform: scale(1.2);
        }
        
        .ai-assistant i {
            font-size: 1.5rem;
        }
        
        .ai-chat {
            position: fixed;
            bottom: 90px;
            right: 20px;
            width: calc(100vw - 40px);
            height: 60vh;
            background: rgba(30, 30, 40, 0.95);
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            display: none;
            flex-direction: column;
            z-index: 100;
            overflow: hidden;
            border: 2px solid var(--primary);
        }
        
        .chat-header {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px;
            font-weight: bold;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1rem;
        }
        
        .chat-messages {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            color: white;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .message {
            padding: 12px;
            border-radius: 12px;
            max-width: 85%;
            line-height: 1.4;
            font-size: 0.9rem;
        }
        
        .ai-message {
            background: rgba(67, 97, 238, 0.3);
            align-self: flex-start;
            border-bottom-left-radius: 5px;
        }
        
        .user-message {
            background: rgba(76, 201, 240, 0.3);
            align-self: flex-end;
            border-bottom-right-radius: 5px;
        }
        
        .chat-input {
            display: flex;
            padding: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .chat-input input {
            flex: 1;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            outline: none;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 1rem;
        }
        
        .chat-input button {
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 15px;
            margin-left: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .chat-input button:active {
            background: var(--secondary);
        }
        
        /* 作品展示样式 */
        .gallery-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 20px;
        }
        
        .gallery-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .gallery-item:active {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }
        
        .gallery-img {
            height: 150px;
            background: linear-gradient(135deg, var(--primary), var(--accent));
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1rem;
        }
        
        .gallery-info {
            padding: 15px;
        }
        
        .gallery-info h4 {
            font-size: 1.1rem;
            margin-bottom: 8px;
            color: var(--success);
        }
        
        .gallery-info p {
            font-size: 0.9rem;
            margin-bottom: 8px;
        }
        
        .gallery-meta {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 0.85rem;
            opacity: 0.8;
        }
        
        /* 隐藏页面 */
        .page {
            display: none;
        }
        
        .active-page {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(30, 30, 40, 0.95);
            display: flex;
            justify-content: space-around;
            padding: 10px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 90;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
            transition: all 0.3s ease;
            padding: 5px 10px;
            border-radius: 10px;
        }
        
        .nav-item.active {
            color: var(--primary);
            background: rgba(67, 97, 238, 0.2);
        }
        
        .nav-item i {
            font-size: 1.2rem;
            margin-bottom: 3px;
        }
        
        /* 动画效果 */
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        
        .floating {
            animation: float 5s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(79, 172, 254, 0); }
            100% { box-shadow: 0 0 0 0 rgba(79, 172, 254, 0); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .modules {
                flex-direction: column;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .module {
                min-width: 100%;
            }
            
            .platform-info {
                grid-template-columns: 1fr;
            }
            
            .mission-stages {
                flex-direction: column;
                gap: 15px;
            }
        }
        
        @media (max-width: 360px) {
            .container {
                padding: 10px;
            }
            
            header {
                padding: 15px 10px;
            }
            
            h1 {
                font-size: 1.6rem;
            }
            
            .card {
                padding: 15px;
            }
            
            .platform-info {
                grid-template-columns: 1fr;
            }
            
            .train-animation {
                height: 80px;
            }
            
            .train {
                width: 150px;
                height: 60px;
                left: -160px;
            }
        }
    </style>
</head>
<body>
    <!-- 主页面 -->
    <div class="container">
        <header>
            <h1>开往2035的UI设计专列</h1>
            <p class="subtitle">探索未来界面设计的无限可能</p>
        </header>
        
        <div class="modules">
            <div class="module" id="dialog-agent">
                <div class="module-icon">🤖</div>
                <h2>对话智能体</h2>
                <p>与AI助手交流，获取UI设计灵感和专业建议</p>
            </div>
            
            <div class="module" id="inspiration">
                <div class="module-icon">💡</div>
                <h2>灵光一现</h2>
                <p>碰撞思维火花，探索多样化的设计方向和可能性</p>
            </div>
            
            <div class="module" id="challenge">
                <div class="module-icon">🚄</div>
                <h2>开往2025UI设计专列</h2>
                <p>体验未来列车UI设计，挑战创新界面解决方案</p>
            </div>
        </div>
    </div>
    
    <!-- 灵光一现页面 -->
    <div id="inspiration-page">
        <button class="back-button" id="back-from-inspiration">返回</button>
        <button class="spark-button" id="spark-button">快点和我碰撞火花</button>
        
        <div class="knowledge-graph" id="knowledge-graph">
            <!-- 知识图谱节点将通过JavaScript动态生成 -->
        </div>
        
        <div class="graph-controls">
            <button class="control-button" id="back-to-categories" style="display: none;">返回分类</button>
        </div>
        
        <div class="details-panel" id="details-panel">
            <button class="close-btn" id="close-details">×</button>
            <h3 id="detail-title">节点详情</h3>
            <div class="detail-item">
                <h4>用户痛点</h4>
                <p id="detail-pain-points">内容加载中...</p>
            </div>
            <div class="detail-item">
                <h4>用户粘性</h4>
                <p id="detail-user-retention">内容加载中...</p>
            </div>
            <div class="detail-item">
                <h4>建议功能</h4>
                <p id="detail-suggested-features">内容加载中...</p>
            </div>
            <div class="detail-item">
                <h4>建议配色</h4>
                <p id="detail-suggested-colors">内容加载中...</p>
            </div>
        </div>
    </div>
    
    <!-- 游戏页面 -->
    <div id="game-page">
        <button class="back-button" id="back-from-game">返回</button>
        
        <div class="game-container">
            <header>
                <h1>开往2035的UI设计专列</h1>
                <p class="subtitle">一场穿越时空的创新设计之旅</p>
            </header>
            
            <!-- 站台页面 -->
            <section id="station-page" class="page active-page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">创新设计站台</h2>
                        <div class="card-badge">准备出发</div>
                    </div>
                    <p class="card-subtitle">欢迎来到未来UI设计之旅起点，领取你的专属车票，开启2035年的设计探索</p>
                    
                    <div class="platform-info">
                        <div class="info-card">
                            <i class="fas fa-clock"></i>
                            <h3>下一站发车</h3>
                            <p id="countdown">00:15:30</p>
                        </div>
                        <div class="info-card">
                            <i class="fas fa-users"></i>
                            <h3>当前乘客</h3>
                            <p id="passenger-count">156</p>
                        </div>
                        <div class="info-card">
                            <i class="fas fa-tasks"></i>
                            <h3>已完成项目</h3>
                            <p id="completed-projects">67</p>
                        </div>
                        <div class="info-card">
                            <i class="fas fa-star"></i>
                            <h3>优秀作品</h3>
                            <p id="featured-projects">23</p>
                        </div>
                    </div>
                    
                    <div class="train-animation">
                        <div id="train" class="train">
                            <div class="train-windows">
                                <div class="train-window"></div>
                                <div class="train-window"></div>
                                <div class="train-window"></div>
                                <div class="train-window"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button id="get-ticket-btn" class="btn primary-btn">
                            <i class="fas fa-ticket-alt"></i> 领取设计车票
                        </button>
                        <button id="enter-gallery-btn" class="btn secondary-btn">
                            <i class="fas fa-images"></i> 参观作品展
                        </button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">旅程指南</h2>
                    </div>
                    <div class="platform-info">
                        <div class="info-card">
                            <i class="fas fa-search"></i>
                            <h3>前期需求分析</h3>
                            <p>用户画像、竞品分析、需求定义</p>
                        </div>
                        <div class="info-card">
                            <i class="fas fa-pencil-ruler"></i>
                            <h3>中期设计制作</h3>
                            <p>思维导图、原型设计、视觉设计</p>
                        </div>
                        <div class="info-card">
                            <i class="fas fa-rocket"></i>
                            <h3>后期完善交付</h3>
                            <p>交互实现、测试优化、作品提交</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 车票页面 -->
            <section id="ticket-page" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">你的设计车票</h2>
                        <div class="card-badge">专属挑战</div>
                    </div>
                    
                    <div class="ticket-card">
                        <div class="ticket-header">
                            <div class="train-number">G2035次</div>
                            <div class="destination">开往：未来体验设计</div>
                        </div>
                        
                        <div class="ticket-body">
                            <div class="info-row">
                                <div class="info-item">
                                    <strong>乘客姓名：</strong>
                                    <span id="passenger-name">UI设计学员</span>
                                </div>
                                <div class="info-item">
                                    <strong>座位号：</strong>
                                    <span id="seat-number">08车15座</span>
                                </div>
                            </div>
                            
                            <div class="info-row">
                                <div class="info-item">
                                    <strong>设计挑战：</strong>
                                    <div class="challenge-title" id="challenge-title">元宇宙社交车厢</div>
                                    <p id="challenge-desc">为2035年的Z世代设计一款基于AR眼镜的沉浸式社交App，强调虚拟身份表达和跨平台互动体验。</p>
                                    
                                    <div class="tech-tags" id="tech-tags">
                                        <span class="tag">AR/VR</span>
                                        <span class="tag">手势交互</span>
                                        <span class="tag">空间UI</span>
                                        <span class="tag">虚拟形象</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="info-row">
                                <div class="info-item">
                                    <strong>发车时间：</strong>
                                    <span id="departure-time">2023年11月15日 10:00</span>
                                </div>
                                <div class="info-item">
                                    <strong>预计到达：</strong>
                                    <span id="arrival-time">7天后</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="action-buttons">
                            <button id="start-journey-btn" class="btn primary-btn">
                                <i class="fas fa-train"></i> 登上列车
                            </button>
                            <button id="back-to-platform-btn" class="btn secondary-btn">
                                <i class="fas fa-arrow-left"></i> 返回站台
                            </button>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 任务页面 -->
            <section id="mission-page" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title" id="mission-title">元宇宙社交车厢挑战</h2>
                        <div class="card-badge">进行中</div>
                    </div>
                    
                    <div class="mission-stages">
                        <div class="stage active" id="stage-1">
                            <div class="stage-circle">1</div>
                            <div class="stage-content">
                                <div class="stage-name">前期需求</div>
                                <div class="stage-desc">用户研究与分析</div>
                            </div>
                        </div>
                        <div class="stage" id="stage-2">
                            <div class="stage-circle">2</div>
                            <div class="stage-content">
                                <div class="stage-name">中期设计</div>
                                <div class="stage-desc">原型与视觉设计</div>
                            </div>
                        </div>
                        <div class="stage" id="stage-3">
                            <div class="stage-circle">3</div>
                            <div class="stage-content">
                                <div class="stage-name">后期完善</div>
                                <div class="stage-desc">交互与测试</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mission-content">
                        <div class="task-section">
                            <h3 class="task-title"><i class="fas fa-user-friends"></i> 用户画像分析</h3>
                            <p class="task-desc">创建至少3个典型用户画像，包括用户粘性分析、痛点识别和解决方案。</p>
                            
                            <div class="task-requirements">
                                <h4><i class="fas fa-list-check"></i> 提交要求：</h4>
                                <ul class="requirements-list">
                                    <li><i class="fas fa-check-circle"></i> 用户基本信息（年龄、职业、兴趣等）</li>
                                    <li><i class="fas fa-check-circle"></i> 用户粘性分析（使用频率、使用场景、忠诚度）</li>
                                    <li><i class="fas fa-check-circle"></i> 用户痛点识别（3-5个核心痛点）</li>
                                    <li><i class="fas fa-check-circle"></i> 针对痛点的解决方案</li>
                                </ul>
                            </div>
                            
                            <div class="submission-area">
                                <h4><i class="fas fa-upload"></i> 提交用户画像：</h4>
                                <textarea class="submission-text" placeholder="请详细描述你的用户画像分析..."></textarea>
                                
                                <div class="file-upload">
                                    <label class="file-upload-label">
                                        <i class="fas fa-cloud-upload-alt"></i> 上传用户画像图表或文档
                                        <input type="file" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="task-section">
                            <h3 class="task-title"><i class="fas fa-chart-bar"></i> 竞品分析</h3>
                            <p class="task-desc">选择2-3个相关竞品，进行结构分析和色彩分析。</p>
                            
                            <div class="task-requirements">
                                <h4><i class="fas fa-list-check"></i> 提交要求：</h4>
                                <ul class="requirements-list">
                                    <li><i class="fas fa-check-circle"></i> 竞品选择理由</li>
                                    <li><i class="fas fa-check-circle"></i> 结构分析（信息架构、导航模式、功能布局）</li>
                                    <li><i class="fas fa-check-circle"></i> 色彩分析（主色调、辅助色、色彩心理学应用）</li>
                                    <li><i class="fas fa-check-circle"></i> 优劣势总结与借鉴点</li>
                                </ul>
                            </div>
                            
                            <div class="submission-area">
                                <h4><i class="fas fa-upload"></i> 提交竞品分析：</h4>
                                <textarea class="submission-text" placeholder="请详细描述你的竞品分析..."></textarea>
                                
                                <div class="file-upload">
                                    <label class="file-upload-label">
                                        <i class="fas fa-cloud-upload-alt"></i> 上传竞品分析图表或文档
                                        <input type="file" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                                    </label>
                                </div>
                                
                                <button id="generate-analysis-btn" class="btn primary-btn" style="margin-top: 15px;">
                                    <i class="fas fa-robot"></i> AI生成竞品分析
                                </button>
                            </div>
                        </div>
                        
                        <div class="action-buttons">
                            <button id="submit-task-btn" class="btn primary-btn">
                                <i class="fas fa-paper-plane"></i> 提交前期需求分析
                            </button>
                            <button id="back-to-ticket-btn" class="btn secondary-btn">
                                <i class="fas fa-arrow-left"></i> 返回车票
                            </button>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 作品展示页面 -->
            <section id="gallery-page" class="page">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">优秀作品展示</h2>
                        <div class="card-badge">灵感源泉</div>
                    </div>
                    <p class="card-subtitle">欣赏其他学员的创新设计，获取灵感与启发</p>
                    
                    <div class="gallery-grid">
                        <div class="gallery-item">
                            <div class="gallery-img">AR社交界面设计</div>
                            <div class="gallery-info">
                                <h4>MetaConnect - 沉浸式社交平台</h4>
                                <p>基于AR眼镜的下一代社交体验，支持虚拟形象和空间交互。</p>
                                <div class="gallery-meta">
                                    <span><i class="fas fa-user"></i> 张小明</span>
                                    <span><i class="fas fa-star"></i> 4.8/5.0</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="gallery-item">
                            <div class="gallery-img">可持续生活APP</div>
                            <div class="gallery-info">
                                <h4>EcoLife - 碳足迹追踪器</h4>
                                <p>通过游戏化设计激励用户减少碳足迹，培养可持续生活习惯。</p>
                                <div class="gallery-meta">
                                    <span><i class="fas fa-user"></i> 李小红</span>
                                    <span><i class="fas fa-star"></i> 4.9/5.0</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="gallery-item">
                            <div class="gallery-img">脑机接口健康监测</div>
                            <div class="gallery-info">
                                <h4>NeuroCare - 认知训练系统</h4>
                                <p>为非侵入式脑机接口设计的老年人认知训练与监测界面。</p>
                                <div class="gallery-meta">
                                    <span><i class="fas fa-user"></i> 王刚</span>
                                    <span><i class="fas fa-star"></i> 4.7/5.0</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="gallery-item">
                            <div class="gallery-img">智能家居控制中心</div>
                            <div class="gallery-info">
                                <h4>HomeMind - 全屋智能中枢</h4>
                                <p>统一管理智能家居设备，通过自然交互提供个性化场景体验。</p>
                                <div class="gallery-meta">
                                    <span><i class="fas fa-user"></i> 赵雪</span>
                                    <span><i class="fas fa-star"></i> 4.6/5.0</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="action-buttons">
                        <button id="back-from-gallery-btn" class="btn primary-btn">
                            <i class="fas fa-arrow-left"></i> 返回站台
                        </button>
                    </div>
                </div>
            </section>
        </div>
        
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <div class="nav-item active" data-page="station-page">
                <i class="fas fa-home"></i>
                <span>站台</span>
            </div>
            <div class="nav-item" data-page="ticket-page">
                <i class="fas fa-ticket-alt"></i>
                <span>车票</span>
            </div>
            <div class="nav-item" data-page="mission-page">
                <i class="fas fa-tasks"></i>
                <span>任务</span>
            </div>
            <div class="nav-item" data-page="gallery-page">
                <i class="fas fa-images"></i>
                <span>作品</span>
            </div>
        </div>
        
        <!-- AI助手 -->
        <div class="ai-assistant" id="ai-assistant">
            <i class="fas fa-robot"></i>
        </div>
        
        <div class="ai-chat" id="ai-chat">
            <div class="chat-header">
                <i class="fas fa-robot"></i> 智小秀 - AI设计助手
            </div>
            <div class="chat-messages" id="chat-messages">
                <div class="message ai-message">
                    你好！我是智小秀，你的AI设计助手。我可以为你提供设计灵感、反馈和建议，帮助你完成用户画像、竞品分析和设计方案。有什么需要帮助的吗？
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="chat-input" placeholder="输入你的问题或需求...">
                <button id="send-message-btn"><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>

    <script>
        // 课程平台主要功能
        document.getElementById('dialog-agent').addEventListener('click', function() {
            window.open('https://www.coze.cn/store/agent/7568303942120226843?bot_id=true&bid=6i499hkok9g0a', '_blank');
        });
        
        document.getElementById('inspiration').addEventListener('click', function() {
            document.getElementById('inspiration-page').style.display = 'flex';
        });
        
        document.getElementById('challenge').addEventListener('click', function() {
            document.getElementById('game-page').style.display = 'block';
        });
        
        // 返回按钮事件
        document.getElementById('back-from-inspiration').addEventListener('click', function() {
            document.getElementById('inspiration-page').style.display = 'none';
            document.getElementById('details-panel').style.display = 'none';
            resetGraph();
        });
        
        document.getElementById('back-from-game').addEventListener('click', function() {
            document.getElementById('game-page').style.display = 'none';
        });
        
        document.getElementById('close-details').addEventListener('click', function() {
            document.getElementById('details-panel').style.display = 'none';
        });
        
        // 知识图谱数据
        const knowledgeData = {
            "兴趣爱好": {
                "运动": {
                    "用户痛点": "缺乏个性化训练计划，难以坚持",
                    "用户粘性": "成就系统和社交功能",
                    "建议功能": "AI个性化训练计划，运动社区",
                    "建议配色": "活力橙+活力蓝"
                },
                "电竞": {
                    "用户痛点": "缺乏专业数据分析和战术指导",
                    "用户粘性": "排行榜和成就系统",
                    "建议功能": "实时数据分析，战术模拟器",
                    "建议配色": "科技紫+电竞红"
                },
                "美食": {
                    "用户痛点": "难以找到符合口味和饮食需求的食谱",
                    "用户粘性": "个性化推荐和社区分享",
                    "建议功能": "AI食谱推荐，食材识别",
                    "建议配色": "温暖橙+食欲红"
                },
                "摄影": {
                    "用户痛点": "后期处理复杂，缺乏灵感",
                    "用户粘性": "作品展示和社区互动",
                    "建议功能": "AI辅助修图，构图建议",
                    "建议配色": "专业黑+创意黄"
                },
                "阅读": {
                    "用户痛点": "难以找到感兴趣的内容，阅读体验差",
                    "用户粘性": "个性化书单和阅读统计",
                    "建议功能": "AI内容推荐，阅读模式优化",
                    "建议配色": "舒适绿+宁静蓝"
                },
                "音乐": {
                    "用户痛点": "推荐不精准，社交功能弱",
                    "用户粘性": "个性化歌单和音乐社区",
                    "建议功能": "AI音乐推荐，协作播放列表",
                    "建议配色": "旋律紫+节奏橙"
                },
                "旅行": {
                    "用户痛点": "行程规划复杂，信息分散",
                    "用户粘性": "旅行记录和分享功能",
                    "建议功能": "AI行程规划，实时景点推荐",
                    "建议配色": "自然绿+天空蓝"
                },
                "手工艺": {
                    "用户痛点": "缺乏指导和创意灵感",
                    "用户粘性": "作品展示和教程分享",
                    "建议功能": "AR教程指导，创意生成器",
                    "建议配色": "创意黄+手工棕"
                },
                "园艺": {
                    "用户痛点": "植物养护知识缺乏，难以诊断问题",
                    "用户粘性": "植物成长记录和社区交流",
                    "建议功能": "AI植物诊断，养护提醒",
                    "建议配色": "自然绿+土壤棕"
                },
                "宠物": {
                    "用户痛点": "健康管理和行为训练困难",
                    "用户粘性": "宠物成长记录和社区",
                    "建议功能": "AI健康监测，训练计划",
                    "建议配色": "温暖橙+宠物蓝"
                }
            },
            "非遗传承": {
                "传统剪纸": {
                    "用户痛点": "技艺传承困难，缺乏创新应用",
                    "用户粘性": "学习成就和作品展示",
                    "建议功能": "AR剪纸教学，数字剪纸创作",
                    "建议配色": "中国红+传统金"
                },
                "陶瓷工艺": {
                    "用户痛点": "制作过程复杂，材料成本高",
                    "用户粘性": "虚拟展览和创作社区",
                    "建议功能": "VR陶瓷制作，3D设计预览",
                    "建议配色": "陶瓷白+青花蓝"
                },
                "皮影戏": {
                    "用户痛点": "表演形式单一，观众减少",
                    "用户粘性": "互动表演和创作工具",
                    "建议功能": "数字皮影创作，AR表演",
                    "建议配色": "传统红+戏剧黄"
                },
                "传统刺绣": {
                    "用户痛点": "学习周期长，图案设计难",
                    "用户粘性": "作品展示和技艺交流",
                    "建议功能": "AI图案生成，AR刺绣指导",
                    "建议配色": "绣线多彩+底布白"
                },
                "木版年画": {
                    "用户痛点": "制作工艺复杂，创新不足",
                    "用户粘性": "数字收藏和创作社区",
                    "建议功能": "数字刻板工具，AR年画展示",
                    "建议配色": "年画红+喜庆金"
                },
                "传统戏曲": {
                    "用户痛点": "年轻观众少，表演形式传统",
                    "用户粘性": "互动学习和虚拟表演",
                    "建议功能": "AR角色扮演，AI唱腔指导",
                    "建议配色": "戏曲红+舞台金"
                },
                "民族服饰": {
                    "用户痛点": "穿着场合少，现代化设计缺乏",
                    "用户粘性": "虚拟试穿和设计社区",
                    "建议功能": "AR试衣间，AI设计助手",
                    "建议配色": "民族特色+现代元素"
                },
                "传统建筑": {
                    "用户痛点": "保护困难，现代应用少",
                    "用户粘性": "虚拟游览和设计工具",
                    "建议功能": "VR建筑游览，AR重建展示",
                    "建议配色": "古建灰+木构棕"
                },
                "传统医药": {
                    "用户痛点": "知识传承难，现代化应用不足",
                    "用户粘性": "健康记录和知识库",
                    "建议功能": "AI诊断辅助，个性化养生方案",
                    "建议配色": "医药绿+传统黄"
                },
                "民俗节庆": {
                    "用户痛点": "传统习俗淡化，参与度低",
                    "用户粘性": "虚拟节庆体验和社区活动",
                    "建议功能": "AR节庆活动，传统游戏数字化",
                    "建议配色": "节日红+庆典金"
                }
            },
            "智慧建设": {
                "智慧城市": {
                    "用户痛点": "城市管理效率低，市民参与度不足",
                    "用户粘性": "市民服务和参与平台",
                    "建议功能": "城市数据可视化，市民反馈系统",
                    "建议配色": "科技蓝+城市灰"
                },
                "智能交通": {
                    "用户痛点": "交通拥堵，出行效率低",
                    "用户粘性": "实时导航和出行统计",
                    "建议功能": "AI路线规划，智能停车系统",
                    "建议配色": "交通绿+导航蓝"
                },
                "智慧医疗": {
                    "用户痛点": "医疗资源分布不均，就医体验差",
                    "用户粘性": "健康管理和在线咨询",
                    "建议功能": "AI初步诊断，远程医疗",
                    "建议配色": "医疗蓝+健康绿"
                },
                "智慧教育": {
                    "用户痛点": "教育资源不均，个性化学习不足",
                    "用户粘性": "学习记录和成就系统",
                    "建议功能": "AI个性化学习路径，VR教学",
                    "建议配色": "教育蓝+知识黄"
                },
                "智能家居": {
                    "用户痛点": "设备兼容性差，操作复杂",
                    "用户粘性": "场景模式和自动化",
                    "建议功能": "统一控制中心，AI场景识别",
                    "建议配色": "家居暖色+科技银"
                },
                "智慧农业": {
                    "用户痛点": "农业生产效率低，资源浪费",
                    "用户粘性": "农场管理和数据分析",
                    "建议功能": "AI种植建议，无人机监控",
                    "建议配色": "农业绿+土地棕"
                },
                "智慧能源": {
                    "用户痛点": "能源利用效率低，管理困难",
                    "用户粘性": "能源监控和节约成就",
                    "建议功能": "智能能源分配，用电分析",
                    "建议配色": "能源蓝+环保绿"
                },
                "智慧环保": {
                    "用户痛点": "环境监测不足，公众参与度低",
                    "用户粘性": "环保行动记录和社区",
                    "建议功能": "环境数据可视化，环保挑战",
                    "建议配色": "环保绿+自然蓝"
                },
                "智慧安防": {
                    "用户痛点": "安全监控盲区，响应速度慢",
                    "用户粘性": "安全状态提醒和报告",
                    "建议功能": "AI异常检测，智能预警",
                    "建议配色": "安全红+监控黑"
                },
                "智慧政务": {
                    "用户痛点": "办事流程复杂，效率低下",
                    "用户粘性": "一站式服务和进度跟踪",
                    "建议功能": "AI办事助手，电子证照",
                    "建议配色": "政务蓝+服务橙"
                }
            },
            "专业竞赛": {
                "全国大学生计算机设计大赛": {
                    "用户痛点": "参赛信息分散，作品展示有限",
                    "用户粘性": "作品展示和评审反馈",
                    "建议功能": "比赛信息整合，作品集展示",
                    "建议配色": "竞赛红+科技蓝"
                },
                "中国大学生服务外包创新创业大赛": {
                    "用户痛点": "项目对接困难，资源整合不足",
                    "用户粘性": "项目展示和团队协作",
                    "建议功能": "项目匹配系统，资源对接平台",
                    "建议配色": "创新紫+创业橙"
                },
                "全国高校数字艺术设计大赛": {
                    "用户痛点": "创意展示有限，评审标准不透明",
                    "用户粘性": "作品展示和同行评价",
                    "建议功能": "多维作品展示，透明评审系统",
                    "建议配色": "艺术紫+创意黄"
                },
                "中国大学生计算机设计大赛": {
                    "用户痛点": "技术实现复杂，团队协作困难",
                    "用户粘性": "代码共享和协作工具",
                    "建议功能": "在线开发环境，团队协作平台",
                    "建议配色": "代码蓝+技术灰"
                },
                "全国大学生广告艺术大赛": {
                    "用户痛点": "创意产出困难，客户需求理解不足",
                    "用户粘性": "作品集展示和客户反馈",
                    "建议功能": "AI创意辅助，客户需求分析",
                    "建议配色": "创意橙+广告黄"
                },
                "中国大学生动漫游戏设计大赛": {
                    "用户痛点": "制作工具复杂，创意实现困难",
                    "用户粘性": "作品展示和粉丝互动",
                    "建议功能": "简易制作工具，AI角色生成",
                    "建议配色": "动漫粉+游戏蓝"
                },
                "全国大学生工业设计大赛": {
                    "用户痛点": "设计工具学习成本高，模型制作困难",
                    "用户粘性": "设计作品展示和评审",
                    "建议功能": "在线设计工具，3D预览",
                    "建议配色": "工业灰+设计橙"
                },
                "中国大学生智能设计竞赛": {
                    "用户痛点": "算法实现复杂，数据集获取困难",
                    "用户粘性": "算法展示和性能比较",
                    "建议功能": "数据集共享，在线算法测试",
                    "建议配色": "智能紫+数据蓝"
                },
                "全国大学生创新创业训练计划": {
                    "用户痛点": "项目规划困难，资源对接不足",
                    "用户粘性": "项目进度跟踪和资源匹配",
                    "建议功能": "项目规划工具，资源对接平台",
                    "建议配色": "创新绿+创业橙"
                },
                "挑战杯全国大学生课外学术科技作品竞赛": {
                    "用户痛点": "学术展示形式单一，评审过程不透明",
                    "用户粘性": "学术成果展示和同行评审",
                    "建议功能": "多维学术展示，透明评审系统",
                    "建议配色": "学术蓝+科技银"
                }
            },
            "社会项目": {
                "社区志愿服务": {
                    "用户痛点": "活动信息分散，参与渠道有限",
                    "用户粘性": "志愿服务记录和成就系统",
                    "建议功能": "活动匹配推荐，志愿服务记录",
                    "建议配色": "志愿红+社区绿"
                },
                "环保公益活动": {
                    "用户痛点": "活动影响力有限，持续性不足",
                    "用户粘性": "环保成就和社区互动",
                    "建议功能": "环保行动记录，活动组织工具",
                    "建议配色": "环保绿+自然蓝"
                },
                "扶贫助农项目": {
                    "用户痛点": "农产品销售渠道有限，信息不对称",
                    "用户粘性": "产品追溯和购买记录",
                    "建议功能": "农产品直销平台，溯源系统",
                    "建议配色": "农业绿+助农橙"
                },
                "教育公益项目": {
                    "用户痛点": "教育资源匹配不精准，效果评估困难",
                    "用户粘性": "教学成果展示和反馈",
                    "建议功能": "教育资源匹配，效果评估系统",
                    "建议配色": "教育蓝+希望黄"
                },
                "健康公益项目": {
                    "用户痛点": "健康知识普及不足，服务覆盖有限",
                    "用户粘性": "健康记录和服务评价",
                    "建议功能": "健康知识库，在线咨询服务",
                    "建议配色": "健康绿+医疗蓝"
                },
                "文化传承项目": {
                    "用户痛点": "传统文化传播形式单一，受众有限",
                    "用户粘性": "文化体验记录和分享",
                    "建议功能": "AR文化体验，数字化展示",
                    "建议配色": "传统红+文化金"
                },
                "灾害救援项目": {
                    "用户痛点": "救援信息传递不及时，资源调配困难",
                    "用户粘性": "救援进展和贡献记录",
                    "建议功能": "实时信息传递，资源调配系统",
                    "建议配色": "救援橙+紧急红"
                },
                "老年人关爱项目": {
                    "用户痛点": "老年人数字鸿沟，社交孤立",
                    "用户粘性": "亲情连接和健康监测",
                    "建议功能": "简化操作界面，紧急呼叫系统",
                    "建议配色": "关爱橙+温馨黄"
                },
                "儿童保护项目": {
                    "用户痛点": "儿童安全监控不足，教育资源有限",
                    "用户粘性": "成长记录和亲子互动",
                    "建议功能": "安全监控系统，教育资源推荐",
                    "建议配色": "保护粉+成长绿"
                },
                "动物保护项目": {
                    "用户痛点": "动物救助信息分散，领养流程复杂",
                    "用户粘性": "救助记录和领养故事",
                    "建议功能": "救助信息整合，在线领养系统",
                    "建议配色": "保护绿+动物棕"
                }
            },
            "企业项目": {
                "电商平台优化": {
                    "用户痛点": "购物体验不佳，个性化推荐不准",
                    "用户粘性": "个性化推荐和会员权益",
                    "建议功能": "AI购物助手，AR试穿试戴",
                    "建议配色": "电商橙+信任蓝"
                },
                "金融科技应用": {
                    "用户痛点": "金融服务复杂，风险控制不足",
                    "用户粘性": "财富管理和投资记录",
                    "建议功能": "智能投顾，风险预警系统",
                    "建议配色": "金融蓝+安全绿"
                },
                "企业管理系统": {
                    "用户痛点": "业务流程复杂，协作效率低",
                    "用户粘性": "工作统计和团队协作",
                    "建议功能": "智能工作流，协作平台",
                    "建议配色": "专业蓝+效率橙"
                },
                "智能客服系统": {
                    "用户痛点": "客服响应慢，问题解决效率低",
                    "用户粘性": "服务记录和满意度评价",
                    "建议功能": "AI客服助手，智能问题分类",
                    "建议配色": "服务蓝+响应绿"
                },
                "数字营销平台": {
                    "用户痛点": "营销效果难衡量，用户触达不精准",
                    "用户粘性": "营销数据分析和优化建议",
                    "建议功能": "用户画像分析，营销自动化",
                    "建议配色": "营销紫+数据蓝"
                },
                "供应链管理系统": {
                    "用户痛点": "供应链透明度低，响应速度慢",
                    "用户粘性": "供应链可视化和预警",
                    "建议功能": "实时追踪，智能预测",
                    "建议配色": "供应链绿+物流橙"
                },
                "人力资源系统": {
                    "用户痛点": "招聘效率低，员工管理复杂",
                    "用户粘性": "职业发展和绩效反馈",
                    "建议功能": "AI简历筛选，员工关怀系统",
                    "建议配色": "人力橙+专业蓝"
                },
                "产品设计工具": {
                    "用户痛点": "设计工具复杂，协作困难",
                    "用户粘性": "设计版本管理和团队协作",
                    "建议功能": "在线协作设计，设计资源库",
                    "建议配色": "设计橙+创意黄"
                },
                "数据分析平台": {
                    "用户痛点": "数据分析复杂，洞察提取困难",
                    "用户粘性": "数据可视化和洞察分享",
                    "建议功能": "AI数据分析，自动报告生成",
                    "建议配色": "数据蓝+洞察紫"
                },
                "物联网应用": {
                    "用户痛点": "设备连接复杂，数据利用不足",
                    "用户粘性": "设备状态监控和自动化",
                    "建议功能": "统一设备管理，智能场景",
                    "建议配色": "物联网蓝+连接绿"
                }
            }
        };
        
        let currentCategoryNodes = [];
        let currentSubcategoryNodes = [];
        
        // 生成知识图谱
        document.getElementById('spark-button').addEventListener('click', function() {
            generateCategories();
        });
        
        function generateCategories() {
            const graphContainer = document.getElementById('knowledge-graph');
            graphContainer.innerHTML = '';
            currentCategoryNodes = [];
            currentSubcategoryNodes = [];
            
            // 显示返回分类按钮
            document.getElementById('back-to-categories').style.display = 'block';
            
            // 创建中心节点
            const centerNode = document.createElement('div');
            centerNode.className = 'node central-node floating';
            centerNode.textContent = '灵感中心';
            centerNode.style.left = '50%';
            centerNode.style.top = '50%';
            centerNode.style.transform = 'translate(-50%, -50%)';
            graphContainer.appendChild(centerNode);
            
            // 创建一级分类节点
            const categories = Object.keys(knowledgeData);
            const centerX = 50; // 百分比
            const centerY = 50; // 百分比
            const radius = 30; // 百分比
            
            categories.forEach((category, index) => {
                const angle = (index / categories.length) * 2 * Math.PI;
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);
                
                const categoryNode = document.createElement('div');
                categoryNode.className = 'node category-node pulse';
                categoryNode.textContent = category;
                categoryNode.style.left = `${x}%`;
                categoryNode.style.top = `${y}%`;
                categoryNode.style.transform = 'translate(-50%, -50%)';
                categoryNode.dataset.category = category;
                categoryNode.dataset.originalX = x;
                categoryNode.dataset.originalY = y;
                
                categoryNode.addEventListener('click', function(e) {
                    e.stopPropagation();
                    focusCategory(category, this);
                });
                
                graphContainer.appendChild(categoryNode);
                currentCategoryNodes.push(categoryNode);
            });
            
            // 添加返回分类按钮事件
            document.getElementById('back-to-categories').addEventListener('click', function() {
                resetToCategories();
            });
        }
        
        function focusCategory(category, clickedNode) {
            // 隐藏所有其他分类节点
            currentCategoryNodes.forEach(node => {
                if (node !== clickedNode) {
                    node.classList.add('hidden');
                }
            });
            
            // 移动点击的节点到中心
            clickedNode.classList.add('centered');
            
            // 显示子分类
            showSubcategories(category, 50, 50);
        }
        
        function showSubcategories(category, parentX, parentY) {
            const graphContainer = document.getElementById('knowledge-graph');
            
            // 移除现有的子分类节点
            currentSubcategoryNodes.forEach(node => node.remove());
            currentSubcategoryNodes = [];
            
            const subcategories = Object.keys(knowledgeData[category]);
            const radius = 15; // 百分比
            
            subcategories.forEach((subcategory, index) => {
                const angle = (index / subcategories.length) * 2 * Math.PI;
                const x = parentX + radius * Math.cos(angle);
                const y = parentY + radius * Math.sin(angle);
                
                const subcategoryNode = document.createElement('div');
                subcategoryNode.className = 'node subcategory-node';
                subcategoryNode.textContent = subcategory;
                subcategoryNode.style.left = `${x}%`;
                subcategoryNode.style.top = `${y}%`;
                subcategoryNode.style.transform = 'translate(-50%, -50%)';
                
                subcategoryNode.addEventListener('click', function(e) {
                    e.stopPropagation();
                    showDetails(category, subcategory);
                });
                
                graphContainer.appendChild(subcategoryNode);
                currentSubcategoryNodes.push(subcategoryNode);
            });
        }
        
        function resetToCategories() {
            // 显示所有分类节点
            currentCategoryNodes.forEach(node => {
                node.classList.remove('hidden');
                node.classList.remove('centered');
                
                // 恢复原始位置
                const originalX = node.dataset.originalX;
                const originalY = node.dataset.originalY;
                node.style.left = `${originalX}%`;
                node.style.top = `${originalY}%`;
            });
            
            // 隐藏子分类节点
            currentSubcategoryNodes.forEach(node => node.remove());
            currentSubcategoryNodes = [];
        }
        
        function resetGraph() {
            const graphContainer = document.getElementById('knowledge-graph');
            graphContainer.innerHTML = '';
            currentCategoryNodes = [];
            currentSubcategoryNodes = [];
            
            // 隐藏返回分类按钮
            document.getElementById('back-to-categories').style.display = 'none';
        }
        
        // 显示详细信息
        function showDetails(category, subcategory) {
            const details = knowledgeData[category][subcategory];
            
            document.getElementById('detail-title').textContent = `${category} - ${subcategory}`;
            document.getElementById('detail-pain-points').textContent = details['用户痛点'];
            document.getElementById('detail-user-retention').textContent = details['用户粘性'];
            document.getElementById('detail-suggested-features').textContent = details['建议功能'];
            document.getElementById('detail-suggested-colors').textContent = details['建议配色'];
            
            document.getElementById('details-panel').style.display = 'block';
        }
        
        // 返回分类按钮事件
        document.getElementById('back-to-categories').addEventListener('click', function() {
            resetToCategories();
        });
        
        // 新列车游戏功能
        // 页面元素
        const stationPage = document.getElementById('station-page');
        const ticketPage = document.getElementById('ticket-page');
        const missionPage = document.getElementById('mission-page');
        const galleryPage = document.getElementById('gallery-page');
        
        const getTicketBtn = document.getElementById('get-ticket-btn');
        const enterGalleryBtn = document.getElementById('enter-gallery-btn');
        const startJourneyBtn = document.getElementById('start-journey-btn');
        const backToPlatformBtn = document.getElementById('back-to-platform-btn');
        const backToTicketBtn = document.getElementById('back-to-ticket-btn');
        const backFromGalleryBtn = document.getElementById('back-from-gallery-btn');
        const submitTaskBtn = document.getElementById('submit-task-btn');
        const generateAnalysisBtn = document.getElementById('generate-analysis-btn');
        
        const aiAssistant = document.getElementById('ai-assistant');
        const aiChat = document.getElementById('ai-chat');
        const chatMessages = document.getElementById('chat-messages');
        const chatInput = document.getElementById('chat-input');
        const sendMessageBtn = document.getElementById('send-message-btn');
        
        const train = document.getElementById('train');
        const navItems = document.querySelectorAll('.nav-item');
        
        // 设计挑战数据
        const challenges = [
            {
                id: 1,
                title: "元宇宙社交车厢",
                description: "为2035年的Z世代设计一款基于AR眼镜的沉浸式社交App，强调虚拟身份表达和跨平台互动体验。",
                difficulty: "★★★☆☆",
                timeLimit: "7天",
                techTags: ["AR/VR", "手势交互", "空间UI", "虚拟形象", "实时协作"]
            },
            {
                id: 2,
                title: "可持续生活车厢",
                description: "设计一个能激励城市居民碳减排的智能终端UI，通过游戏化设计培养用户的环保习惯。",
                difficulty: "★★☆☆☆",
                timeLimit: "5天",
                techTags: ["IoT", "数据可视化", "游戏化", "可持续", "行为设计"]
            },
            {
                id: 3,
                title: "脑机接口健康车厢",
                description: "为轻度认知障碍的老年人设计一个非侵入式脑机接口的认知训练界面，兼顾易用性和有效性。",
                difficulty: "★★★★☆",
                timeLimit: "10天",
                techTags: ["脑机接口", "健康科技", "无障碍设计", "认知科学", "个性化"]
            },
            {
                id: 4,
                title: "智能交通车厢",
                description: "为2035年的自动驾驶共享汽车设计车内交互体验，提升乘客的出行舒适度和效率。",
                difficulty: "★★★☆☆",
                timeLimit: "7天",
                techTags: ["自动驾驶", "车载UI", "多模态交互", "共享经济", "情境感知"]
            }
        ];
        
        // 当前状态
        let currentChallenge = null;
        let currentStageIndex = 0;
        let trainPosition = -190;
        
        // 初始化
        function initGame() {
            // 列车动画
            animateTrain();
            
            // 事件监听
            getTicketBtn.addEventListener('click', getTicket);
            enterGalleryBtn.addEventListener('click', showGallery);
            startJourneyBtn.addEventListener('click', startJourney);
            backToPlatformBtn.addEventListener('click', showPlatform);
            backToTicketBtn.addEventListener('click', showTicket);
            backFromGalleryBtn.addEventListener('click', showPlatform);
            submitTaskBtn.addEventListener('click', submitTask);
            generateAnalysisBtn.addEventListener('click', generateAnalysis);
            
            // 底部导航事件
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    const pageId = this.getAttribute('data-page');
                    showPage(pageId);
                    
                    // 更新导航激活状态
                    navItems.forEach(nav => nav.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // AI助手事件
            aiAssistant.addEventListener('click', toggleAIChat);
            sendMessageBtn.addEventListener('click', sendMessage);
            chatInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
            
            // 初始化倒计时
            startCountdown();
        }
        
        // 列车动画
        function animateTrain() {
            setInterval(() => {
                trainPosition += 2;
                if (trainPosition > window.innerWidth) {
                    trainPosition = -190;
                }
                train.style.left = trainPosition + 'px';
            }, 50);
        }
        
        // 倒计时
        function startCountdown() {
            let time = 15 * 60 + 30; // 15分30秒
            
            setInterval(() => {
                time--;
                if (time < 0) time = 15 * 60 + 30;
                
                const minutes = Math.floor(time / 60);
                const seconds = time % 60;
                
                document.getElementById('countdown').textContent = 
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }, 1000);
        }
        
        // 获取车票
        function getTicket() {
            // 随机选择一个挑战
            currentChallenge = challenges[Math.floor(Math.random() * challenges.length)];
            
            // 更新车票信息
            document.getElementById('challenge-title').textContent = currentChallenge.title;
            document.getElementById('challenge-desc').textContent = currentChallenge.description;
            document.getElementById('mission-title').textContent = currentChallenge.title;
            
            // 更新技术标签
            const techTagsContainer = document.getElementById('tech-tags');
            techTagsContainer.innerHTML = '';
            currentChallenge.techTags.forEach(tag => {
                const tagElement = document.createElement('span');
                tagElement.className = 'tag';
                tagElement.textContent = tag;
                techTagsContainer.appendChild(tagElement);
            });
            
            // 显示车票页面
            showTicket();
            
            // 更新导航激活状态
            navItems.forEach(nav => nav.classList.remove('active'));
            document.querySelector('.nav-item[data-page="ticket-page"]').classList.add('active');
        }
        
        // 开始旅程
        function startJourney() {
            currentStageIndex = 0;
            showMission();
            
            // 更新导航激活状态
            navItems.forEach(nav => nav.classList.remove('active'));
            document.querySelector('.nav-item[data-page="mission-page"]').classList.add('active');
        }
        
        // 提交任务
        function submitTask() {
            const submissionText = document.querySelector('.submission-text').value;
            
            if (!submissionText.trim()) {
                alert('请先填写或上传你的作品！');
                return;
            }
            
            // 模拟AI反馈
            addAIMessage("感谢你的提交！我已经分析了你的前期需求分析作品。你的用户画像非常详细，特别是在用户粘性分析方面做得很到位。竞品分析的结构也很清晰，但建议在色彩分析部分加入更多心理学依据。要继续进入中期设计阶段吗？");
            
            // 标记当前阶段为完成
            const currentStage = document.getElementById(`stage-${currentStageIndex + 1}`);
            currentStage.classList.remove('active');
            currentStage.classList.add('completed');
            
            // 移动到下一个阶段
            currentStageIndex++;
            
            if (currentStageIndex < 3) {
                // 激活下一个阶段
                const nextStage = document.getElementById(`stage-${currentStageIndex + 1}`);
                nextStage.classList.add('active');
                
                // 更新任务内容
                updateMissionContent();
                
                // 清空提交区域
                document.querySelector('.submission-text').value = '';
                
                alert(`恭喜完成第${currentStageIndex}阶段任务！已解锁第${currentStageIndex + 1}阶段。`);
            } else {
                alert('恭喜你！你已经完成了所有阶段任务，成功抵达2035！');
                showPlatform();
                
                // 更新导航激活状态
                navItems.forEach(nav => nav.classList.remove('active'));
                document.querySelector('.nav-item[data-page="station-page"]').classList.add('active');
            }
        }
        
        // 更新任务内容
        function updateMissionContent() {
            if (currentStageIndex === 1) {
                // 中期设计阶段
                document.querySelector('.task-title').innerHTML = '<i class="fas fa-pencil-ruler"></i> 思维导图与信息架构';
                document.querySelector('.task-desc').textContent = '创建产品思维导图，设计信息架构和用户流程。';
                
                const requirementsList = document.querySelector('.requirements-list');
                requirementsList.innerHTML = `
                    <li><i class="fas fa-check-circle"></i> 产品功能思维导图</li>
                    <li><i class="fas fa-check-circle"></i> 信息架构图</li>
                    <li><i class="fas fa-check-circle"></i> 主要用户流程图</li>
                    <li><i class="fas fa-check-circle"></i> 页面结构规划</li>
                `;
                
                document.querySelector('.submission-area h4').innerHTML = '<i class="fas fa-upload"></i> 提交思维导图：';
                document.querySelector('.submission-text').placeholder = '请描述你的思维导图和信息架构设计...';
                
                // 更新第二个任务
                const secondTask = document.querySelectorAll('.task-section')[1];
                secondTask.querySelector('.task-title').innerHTML = '<i class="fas fa-palette"></i> 原型与视觉设计';
                secondTask.querySelector('.task-desc').textContent = '创建低保真和高保真原型，设计视觉风格和界面元素。';
                
                const secondRequirements = secondTask.querySelector('.requirements-list');
                secondRequirements.innerHTML = `
                    <li><i class="fas fa-check-circle"></i> 低保真线框图</li>
                    <li><i class="fas fa-check-circle"></i> 高保真交互原型</li>
                    <li><i class="fas fa-check-circle"></i> 视觉设计规范</li>
                    <li><i class="fas fa-check-circle"></i> 关键界面视觉效果图</li>
                `;
                
                secondTask.querySelector('.submission-area h4').innerHTML = '<i class="fas fa-upload"></i> 提交原型设计：';
                secondTask.querySelector('.submission-text').placeholder = '请描述你的原型设计和视觉方案...';
                
                submitTaskBtn.innerHTML = '<i class="fas fa-paper-plane"></i> 提交中期设计成果';
                
            } else if (currentStageIndex === 2) {
                // 后期完善阶段
                document.querySelector('.task-title').innerHTML = '<i class="fas fa-mouse-pointer"></i> 交互实现';
                document.querySelector('.task-desc').textContent = '完善页面交互细节，实现关键动效和微交互。';
                
                const requirementsList = document.querySelector('.requirements-list');
                requirementsList.innerHTML = `
                    <li><i class="fas fa-check-circle"></i> 完整页面交互流程</li>
                    <li><i class="fas fa-check-circle"></i> 关键动效设计</li>
                    <li><i class="fas fa-check-circle"></i> 微交互细节</li>
                    <li><i class="fas fa-check-circle"></i> 交互状态设计（加载、错误、成功等）</li>
                `;
                
                document.querySelector('.submission-area h4').innerHTML = '<i class="fas fa-upload"></i> 提交交互实现：';
                document.querySelector('.submission-text').placeholder = '请描述你的交互设计和实现细节...';
                
                // 更新第二个任务
                const secondTask = document.querySelectorAll('.task-section')[1];
                secondTask.querySelector('.task-title').innerHTML = '<i class="fas fa-vial"></i> 测试与优化';
                secondTask.querySelector('.task-desc').textContent = '进行可用性测试，收集反馈并优化设计方案。';
                
                const secondRequirements = secondTask.querySelector('.requirements-list');
                secondRequirements.innerHTML = `
                    <li><i class="fas fa-check-circle"></i> 可用性测试计划</li>
                    <li><i class="fas fa-check-circle"></i> 测试结果分析</li>
                    <li><i class="fas fa-check-circle"></i> 设计优化方案</li>
                    <li><i class="fas fa-check-circle"></i> 最终作品展示</li>
                `;
                
                secondTask.querySelector('.submission-area h4').innerHTML = '<i class="fas fa-upload"></i> 提交最终作品：';
                secondTask.querySelector('.submission-text').placeholder = '请描述你的测试过程和最终优化方案...';
                
                submitTaskBtn.innerHTML = '<i class="fas fa-paper-plane"></i> 提交最终作品';
            }
        }
        
        // AI生成竞品分析
        function generateAnalysis() {
            addAIMessage("我正在为你生成竞品分析...");
            
            // 模拟AI生成内容
            setTimeout(() => {
                const analysis = `
基于你的设计挑战"${currentChallenge.title}"，我分析了以下竞品：

1. Meta Horizon Worlds
   - 结构分析：采用中心广场+独立世界的架构，导航清晰但层级较深
   - 色彩分析：主色调为深蓝和紫色，营造科技感和神秘感，但对比度不足影响可读性

2. Snapchat AR
   - 结构分析：相机优先的扁平化结构，功能入口明确，但功能过多导致界面拥挤
   - 色彩分析：亮黄色主调充满活力，适合年轻用户，但长时间使用可能造成视觉疲劳

3. Spatial.io
   - 结构分析：会议场景导向的简洁结构，易于上手，但自定义选项有限
   - 色彩分析：使用中性灰和蓝色系，专业感强，但缺乏个性表达

建议借鉴点：
- 结合Snapchat的年轻化色彩和Spatial的专业简洁结构
- 采用Meta的虚拟空间概念但简化导航层级
- 增加个性化色彩主题选项满足不同用户偏好
                `;
                
                document.querySelector('.submission-text').value = analysis;
                addAIMessage("竞品分析已生成！你可以在此基础上进行修改和补充。如果需要更详细的分析，请告诉我。");
            }, 2000);
        }
        
        // 显示不同页面
        function showPlatform() {
            showPage('station-page');
        }
        
        function showTicket() {
            showPage('ticket-page');
        }
        
        function showMission() {
            showPage('mission-page');
        }
        
        function showGallery() {
            showPage('gallery-page');
        }
        
        function showPage(pageId) {
            document.querySelectorAll('.page').forEach(p => {
                p.classList.remove('active-page');
            });
            document.getElementById(pageId).classList.add('active-page');
            
            // 更新导航激活状态
            navItems.forEach(nav => nav.classList.remove('active'));
            document.querySelector(`.nav-item[data-page="${pageId}"]`).classList.add('active');
        }
        
        // AI聊天功能
        function toggleAIChat() {
            if (aiChat.style.display === 'flex') {
                aiChat.style.display = 'none';
            } else {
                aiChat.style.display = 'flex';
                chatInput.focus();
            }
        }
        
        function sendMessage() {
            const message = chatInput.value.trim();
            if (!message) return;
            
            // 添加用户消息
            addUserMessage(message);
            
            // 清空输入框
            chatInput.value = '';
            
            // 模拟AI回复
            setTimeout(() => {
                let response = "";
                
                if (message.includes('帮助') || message.includes('怎么') || message.includes('如何')) {
                    response = "我可以帮助你：1) 提供设计灵感和参考 2) 分析你的设计思路 3) 解答UI/UX设计问题 4) 模拟用户反馈 5) 生成竞品分析。请具体告诉我你需要哪方面的帮助？";
                } else if (message.includes('灵感') || message.includes('参考')) {
                    response = `基于你的挑战"${currentChallenge.title}"，我建议：1) 研究现有的AR社交应用如Snapchat和Meta Horizon 2) 探索元宇宙平台如Decentraland和Spatial 3) 参考科幻电影中的未来界面设计 4) 关注手势交互和空间UI的最新研究。需要我详细解释任何一个方向吗？`;
                } else if (message.includes('用户') || message.includes('画像')) {
                    response = "对于2035年的Z世代用户，考虑：1) 数字原生代，对虚拟身份有强烈需求 2) 注重个性表达和社群归属 3) 可能对隐私更加敏感 4) 期望无缝的多设备体验。你可以从这些角度构建用户画像，重点关注用户粘性和痛点分析。";
                } else if (message.includes('竞品') || message.includes('分析')) {
                    response = "竞品分析应包含：1) 选择2-3个直接或间接竞品 2) 结构分析（信息架构、导航模式）3) 色彩分析（主色调、色彩心理学）4) 交互模式分析 5) 优劣势总结。点击'AI生成竞品分析'按钮，我可以为你生成一个初步分析。";
                } else if (message.includes('反馈') || message.includes('评价')) {
                    response = "要获得具体反馈，请分享：1) 你的设计目标 2) 目标用户特征 3) 主要设计决策 4) 具体的设计截图或描述。我可以从可用性、一致性和创新性等角度提供建议。";
                } else {
                    response = "我理解你的问题了。作为AI设计助手，我可以帮你分析设计思路、提供创新灵感或模拟用户测试。你能更具体地描述你遇到的挑战或需要帮助的方面吗？";
                }
                
                addAIMessage(response);
            }, 1000);
        }
        
        function addUserMessage(text) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message user-message';
            messageDiv.textContent = text;
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        function addAIMessage(text) {
            const messageDiv = document.createElement('div');
            messageDiv.className = 'message ai-message';
            messageDiv.textContent = text;
            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }
        
        // 初始化游戏
        window.onload = function() {
            initGame();
        };
    </script>
</body>
</html>